<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>汽车详情</title>
     <link href="${ pageContext.request.contextPath}/web/assets/css/base.css" type="text/css" rel="stylesheet">
    <link href="${ pageContext.request.contextPath}/web/assets/css/style.css" type="text/css" rel="stylesheet">
    <link href="${ pageContext.request.contextPath}/web/assets/css/banner.css" type="text/css" rel="stylesheet">
    <script src="${ pageContext.request.contextPath}/web/assets/jquery.min.js"></script>
    <script src="${ pageContext.request.contextPath}/web/assets/banner.js"></script>
    <link href="${ pageContext.request.contextPath}/assets/codeying.css" rel="stylesheet">
    <script>
        var starId = ''
        $(function () {
            let id = $("#id").val()
            hasStar(id)
        })
        function hasStar(id,entityName='${ entityName}') {
            $.ajax({
                url: "${ pageContext.request.contextPath}/"+welcome,
                data: {action: 'hasStar', id,entityName},
                // contentType: "application/json",
                type: "GET",
                success: function (data) {
                    if(data.data){
                        starId = data.data
                        $("#star1").hide();
                        $("#star2").show();
                    }else {
                        $("#star2").hide();
                        $("#star1").show();
                    }
                }
            });
        }
        function cancelStar(entityName='${ entityName}') {
            let id = starId
            $.ajax({
                url: "${ pageContext.request.contextPath}/"+welcome,
                data: {action: 'cancelStar', id,entityName},
                // contentType: "application/json",
                type: "GET",
                success: function (data) {
                    alert(data.message);
                    if(data.success){
                        $("#star2").hide();
                        $("#star1").show();
                    }else {
                        $("#star1").hide();//收藏
                        $("#star2").show();
                    }
                }
            });
        }
        function star(id,entityName="${ entityName}") {
            $.ajax({
                url: "${ pageContext.request.contextPath}/"+welcome,
                data: {action: 'star', id,entityName},
                // contentType: "application/json",
                type: "GET",
                success: function (data) {
                    alert(data.message);
                    if(data.success){
                        $("#star1").hide();//收藏
                        $("#star2").show();
                    }else {
                        $("#star2").hide();
                        $("#star1").show();
                    }
                }
            });
        }
        function s2(id) {
            location.href = '${ pageContext.request.contextPath}/yuyue/edit?cid='+id
        }
        function s1(id) {
            location.href = '${ pageContext.request.contextPath}/rentorder/edit?cid='+id
        }

    </script>
</head>
<body>
<!-- 头部栏位 -->
<jsp:include page="./c-head.jsp"></jsp:include>

<input type="hidden" value="${ detail.id}" id="id">
<div class="main-content">
    <div class="m-body main-detail">
        <!--        详情页头部-->
        <div class="detail-head">
            <div class="detail-head-box1">
                <img src="${ pageContext.request.contextPath}/file?filename=${ detail.showpic}">
            </div>
            <div class="detail-head-box2">
                <h1>${ detail.showtitle}</h1>
                <p class="detail-head-box2-desc">${ detail.showdesc}</p>
                <p class="detail-head-box2-tip">发布时间：<fmt:formatDate value='${ detail.publishtime }' pattern='yyyy-MM-dd HH:mm:ss'/></p>
                <p class="detail-head-box2-tip">收藏数：${ starCount }</p>
                <button id="star1" type="button" onclick="star('${ detail.id}')">收 藏</button>
                <button id="star2" type="button" onclick="cancelStar('${ detail.id}')">取消收藏</button>
                <button id="s1" type="button" onclick="s1('${ detail.id}')">立即租车</button>
                <button id="s2" type="button" onclick="s2('${ detail.id}')">预约试驾</button>
            </div>
        </div>
        <!--详情页主体-->
        <div class="detail-body">
            <div class="detail-body1">
                <p>热 门 推 荐</p>
                <c:forEach items="${ hotList }" var="i" varStatus="s">
                <div class="detail-hot">
                    <a href="${ pageContext.request.contextPath}/welcome?entityName=${ entityName}&id=${ i.itemid}">
                        <img src="${ pageContext.request.contextPath}/file?filename=${ i.showpic}">
                        <p title="${ i.showtitle}">${ i.showtitle}</p>
                        <p>${ i.showdesc}</p>
                        <p>收藏：${ i.count}</p>
                    </a>
                </div>
                </c:forEach>

            </div>
            <div class="detail-body2">
                <h2>内容详情</h2>
                    <h3>汽车标题</h3>
                <p>${ detail.showtitle}</p>

                    <h3>汽车描述</h3>
                <p>${ detail.showdesc}</p>

                    <h3>价格每天</h3>
                <p>${ detail.price}</p>

                    <h3>汽车租赁说明</h3>
                <p>${ detail.showdetail}</p>

                    <h3>发布时间</h3>
                <p><fmt:formatDate value='${ detail.publishtime }' pattern='yyyy-MM-dd HH:mm:ss'/></p>
                        <h3>展示</h3>
                <c:if test="${ not empty detail.carpic}">
                    <c:choose>
                        <c:when test="${ fn:endsWith(detail.carpic,'.jpg') or fn:endsWith(detail.carpic,'.JPG')or fn:endsWith(detail.carpic,'.png')or fn:endsWith(detail.carpic,'.gif')or fn:endsWith(detail.carpic,'.bmp')or fn:endsWith(detail.carpic,'.tiff')}">
                            <!--图片-->
                            <img src="${ pageContext.request.contextPath}/file?filename=${ detail.carpic}"/>
                        </c:when>
                        <c:when test="${ fn:endsWith(detail.carpic,'.mp4') or fn:endsWith(detail.carpic,'.avi')or fn:endsWith(detail.carpic,'.wmv')or fn:endsWith(detail.carpic,'.WMV')or fn:endsWith(detail.carpic,'.flv')}">
                            <!--视频-->
                            <video src="${ pageContext.request.contextPath}/file?filename=${ detail.carpic}" autoplay="autoplay" muted="muted"  loop="loop" controls></video>
                        </c:when>
                        <c:when test="${ fn:endsWith(detail.carpic,'.mp3') or fn:endsWith(detail.carpic,'.wma')or fn:endsWith(detail.carpic,'.WMA')}">
                            <!--音频-->
                            <audio src="${ pageContext.request.contextPath}/file?filename=${ detail.carpic}" controls="controls"></audio>
                        </c:when>
                        <c:otherwise>
                            <a style="color:#208b6b" href="${ pageContext.request.contextPath}/file?filename=${ detail.carpic }" target="_blank">
                                下载${ detail.carpic }
                            </a>
                        </c:otherwise>
                    </c:choose>
                </c:if>
                    <h3>主图</h3>
                <img style="margin-bottom: 20px;width: 100%;" src="${ pageContext.request.contextPath}/file?filename=${ detail.showpic}"/>

                                        <!--评论-->
                        <div id="comments" class="comments">
                            <input id="ctid" value="${ detail.id}" type="hidden">
                            <h3 style="text-align: center">留言区</h3>
                            <div id="publishBox" class="comment">
                                <div class="comment-head">
                                    <img src="${ pageContext.request.contextPath}/assets/images/users/avatar.jpg">
                                    <c:if test="${ sessionScope.user!=null}">
                                        <span>【${ sessionScope.user.rolech}】${ sessionScope.user.username}</span>
                                    </c:if>
                                    <c:if test="${ sessionScope.user==null}">
                                        <span>【登录以后即可发表留言~】</span>
                                    </c:if>
                                </div>
                                <div class="comment-body">
                                    <textarea id="commentStr"></textarea>
                                    <button id="publishBtn" type="button">发表</button>
                                </div>
                            </div>
                        </div>
                        <script>
                            var comments = document.getElementById("comments");
                            $(function () {
                                //获取评论
                                $.ajax({
                                    url: "${ pageContext.request.contextPath}/userComment2/action",
                                    data: {'ctid': $("#ctid").val()},
                                    type: "GET",
                                    success: function (data) {
                                        if(data.data){
                                            data = data.data
                                            for (let i = 0; i < data.length; i++) {
                                                let d = data[i];
                                                let html = `<div class="comment">
                                                                    <div class="comment-head">
                                                                        <img src="`+ctx+`/assets/images/users/avatar.jpg">
                                                                        <span>【`+d.rolech+`】`+d.username+`</span>
                                                                        <span class="time">`+formatDate(d.createtime)+`</span>
                                                                    </div>
                                                                    <div class="comment-body">
                                                                        <p>`+d.content+`</p>
                                                                    </div>
                                                                </div>`
                                                comments.innerHTML+=html
                                                pubEvent()
                                            }
                                        }
                                    }
                                });
                                pubEvent()
                            })
                            //绑定发表事件
                            function pubEvent() {
                                $("#publishBtn").unbind("click");
                                $("#publishBtn").click(function () {
                                    publish()
                                })
                            }
                            //发表
                            function publish() {
                                $.ajax({
                                    url: ctx + "/userComment2/action",
                                    data: {'ctid': $("#ctid").val(),'content':$("#commentStr").val(),type:'car'},
                                    type: "POST",
                                    success: function (data) {
                                        if(data.success){
                                            let html = $(`<div class="comment">
                                                                    <div class="comment-head">
                                                                        <img src="`+ctx+`/assets/images/users/avatar.jpg">
                                                                        <span>我</span>
                                                                        <span class="time">刚刚</span>
                                                                    </div>
                                                                    <div class="comment-body">
                                                                        <p>`+$("#commentStr").val()+`</p>
                                                                    </div>
                                                                </div>`)
                                            $("#commentStr").val('')
                                            $(html).insertAfter($("#publishBox"))
                                        }else {
                                            alert("请先登录")
                                        }
                                    }
                                });
                            }
                            //时间戳转字符串
                            function formatDate(value) {
                                var date = new Date(value);
                                var y = date.getFullYear(),
                                    m = date.getMonth() + 1,
                                    d = date.getDate(),
                                    h = date.getHours(),
                                    i = date.getMinutes(),
                                    s = date.getSeconds();
                                if (m < 10) { m = '0' + m; }
                                if (d < 10) { d = '0' + d; }
                                if (h < 10) { h = '0' + h; }
                                if (i < 10) { i = '0' + i; }
                                if (s < 10) { s = '0' + s; }
                                var t = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
                                return t;
                            }
                        </script>
            </div>
        </div>

    </div>
</div>

<jsp:include page="./c-foot.jsp"></jsp:include>

</body>
</html>

